<%@ page import="com.njts.bean.Student" %>
<%@ page import="java.util.List" %>
<%@ page import="com.njts.bean.Class" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/24
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>

<head>
  <title>Title</title>
</head>

<body>

  <% List<Student> studentList = (List<Student>) request.getAttribute("studentList");%>
      <% String[] titles=new String[]{"班级","姓名","年龄","性别","身份证号","民族","籍贯"}; String[] names=new
        String[]{"className","name","age","sex","idCard","nation","nativePlace"}; String[] placeholder=new
        String[]{ "请输入班级" , "请输入姓名" , "请输入年龄" , "请输入性别" , "请输入身份证号" , "请输入民族" , "请输入籍贯" , }; %>
        <span style="display: inline-block; font-size: 20px;">功能区</span>
        <div style="overflow: auto">
          <div class="input-group">
            <% for(int i=0; i< names.length;i++){%>

              <div class="input-group-addon">
                <%= titles[i]%>
              </div>
              <c:set var="name" value="<%=titles[i]%>"></c:set>
              <c:if test="${!name.equals('班级')}">
                <input type="text" name="<%=names[i]%>" id="input<%=names[i]%>" class="form-control" value=""
                  required="required" pattern="" title="" placeholder="<%=placeholder[i]%>"
                  style="width:100px;height: 52px">
              </c:if>
              <c:if test="${name.equals('班级')}">
                <% List<Class> classList= (List<Class>) request.getAttribute("classList");%>
                    <select size="2" name="class" id="inputclassId" class="form-control" required="required"
                      style="width: 100px;">
                        <option value="0">全部</option>
                      <% for(Class classes : classList){ %>
                        <option value="<%=classes.getId()%>">
                          <%=classes.getName()%>
                        </option>
                        <% }%>
                    </select>

              </c:if>

              <% }%>
          </div>
          <div style="display: flex;justify-content: end">

            <div class="input-group-addon" style="width:52px; line-height: 20px">id</div>
            <input type="text" name="id" id="inputid" class="form-control" value="" required="required" pattern=""
              title="" placeholder="请输入要修改的id" style="width: 250px">
            <button type="button" class="btn btn-success studentUpdateButton">修改</button>
            <button type="button" class="btn btn-primary studentAddButton">增加</button>
            <button type="button" class="btn btn-warning studentSelectButton">搜索</button>
          </div>
        </div>



        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>id</th>
              <% for(int i=0;i<titles.length;i++){%>
                <th>
                  <%=titles[i]%>
                </th>
                <%}%>
                  <th>操作</th>
            </tr>
          </thead>
          <tbody class="studentTable-tbody">
            <% int index=0; for(Student student : studentList){ index++; %>
              <tr>
                <td class="id">
                  <%= student.getId() %>
                </td>
                <td>
                  <%= student.getClassName()%>
                </td>
                <td>
                  <%= student.getName() %>
                </td>
                <td>
                  <%= student.getAge()%>
                </td>

                <td>
                  <%= student.getSex()%>
                </td>

                <td>
                  <%= student.getIdCard()%>
                </td>

                <td>
                  <%= student.getNation()%>
                </td>

                <td>
                  <%= student.getNativePlace()%>
                </td>
                <td>
                  <button type="button" class="btn btn-danger deleteButton">删除</button>
                </td>
              </tr>
              <%}%>
          </tbody>
        </table>
        <div style="display: flex;justify-content: end;">
          <% int studentCount=(int) request.getAttribute("studentCount"); int everyPageCount=8; int
            pageCount=studentCount%everyPageCount==0?studentCount/everyPageCount:studentCount/everyPageCount+1; %>
            <ul class="pagination">
              <li><a href="#">&laquo;</a></li>
              <% for(int i=1;i<=pageCount;i++){%>
                <li><a href="#">
                    <%= i%>
                  </a></li>
                <%}%>
                  <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
        <script>
          function globalRefresh(response){
            var pattern=/<body>(\s|\S)*<\/body>/
            var data=response.toString();
            var html=pattern.exec(data)[0].replace(/<body>|<\/body>/,"").replace(/\s\\r\s/g,"").replaceAll(/\s\\n\s/g,"");
            $(".main-body").html(html);
          }
          function studentDelete(id,tr) {
            $.ajax({
              type: "post",
              url: "/studentDeleteById",
              data: {
                id
              },
              success: function (response) {
                console.log(response)
                if (response == "200") {
                  console.log("数据库删除成功");
                  $(tr).remove()
                  return true;
                } else {
                  console.log("数据库删除失败");
                  return false;
                }
              }
            });
          }
          function studentAdd(student){
              $.ajax({
                type: "post",
                url: "/studentAdd",
                data: student,
                success: function (response) {
                     globalRefresh(response);
                }
              });
          }
          function studentUpdate(student){
            $.ajax({
              type: "post",
              url: "/studentUpdate",
              data: student,
              success: function (response) {
                globalRefresh(response);
              }
            });
          }
          function studentSelect(student){
            $.ajax({
              type: "post",
              url: "/studentSelect",
              data: student,
              success: function (response) {
                globalRefresh(response);
              }
            });
          }
          function getStudent(){
            var id=$("#inputid").val();
            var name=$("#inputname").val();
            var age=$("#inputage").val();
            var sex=$("#inputsex").val();
            var idCard=$("#inputidCard").val();
            var nation=$("#inputnation").val();
            var nativePlace=$("#inputnativePlace").val();
            var classId=$("#inputclassId").val();
            var student={
                    id,name,age,sex,idCard,nation,nativePlace,classId
            }
            return student;
          }
          $(function () {
            $(".studentTable-tbody tr .deleteButton").on("click", function (e) {
              var tr=e.target.parentNode.parentNode;
              var id=$(tr.querySelector(".id")).text().trim();
              studentDelete(id,tr)
            });
            $(".studentAddButton").on("click",function(e){
                var student=getStudent();
                studentAdd(student);
            })
            $(".studentUpdateButton").on("click",function (e){
               var student=getStudent();
               studentUpdate(student);
            })
            $(".studentSelectButton").on("click",function (e){
              var student=getStudent();
              studentSelect(student);
            })
          })
        </script>

</body>

</html>
